<template>
    <div>
        <div class="wordbook-add" @click="show = true">
            <span>+</span>
            <span>添加单词本</span>
        </div>

        <van-action-sheet v-model:show="show" title="创建单词本" close-on-click-action>
            <!-- 在里面放置新建单词本表单 -->
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field @click="showCategoryPicker=true" v-model="category.name" name="categoryPicker" label="单词本分类" placeholder="请选择单词本分类">
                        <!-- <template #button>
                            <van-button type="primary" size="mini"
                                @click="showCategoryPicker = true">选择单词本分类></van-button>
                        </template> -->
                    </van-field>
                    <van-popup v-model:show="showCategoryPicker" destroy-on-close position="bottom">
                        <van-picker :columns="categories" :columns-field-names="customCategoryName"
                            :model-value="categoryPickerValue" @confirm="onCategoryConfirm"
                            @cancel="showCategoryPicker = false" />
                    </van-popup>

                    <van-field v-model="article.title" name="articlePicker" label="单词本来源" placeholder="请选择单词本来源">
                        <template #button>
                            <van-button type="primary" size="mini"
                                @click="showArticlePicker = true">选择单词本来源></van-button>
                        </template>
                    </van-field>
                    <van-popup v-model:show="showArticlePicker" destroy-on-close position="bottom">
                        <van-picker :columns="articles" :columns-field-names="customArticleName"
                            :model-value="articlePickerValue" @confirm="onArticleConfirm"
                            @cancel="showArticlePicker = false" />
                    </van-popup>

                    <van-field v-model="wordBook.name" name="workbookName" label="单词本名称" placeholder="输入单词本名称"
                        :rules="[{ required: true, message: '请输入单词本名称' }]" />
                    <van-field name="importance" label="重要程度">
                        <template #input>
                            <van-rate v-model="wordBook.importance" clearable />
                        </template>
                    </van-field>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit" >
                        提交
                    </van-button>
                </div>
            </van-form>
        </van-action-sheet>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { onBeforeMount } from 'vue';

import { type WordBook, type Article, type Category, type Word, url } from '@/interface';
import axios from 'axios';

// 组件使用的地方，需要绑定"createWordbook"事件
onBeforeMount(() => {
    initialCategories(); // 初始化目录分类
    initialArticles(); // 初始化文章分类
})
const emits = defineEmits(['createWordbook']);
const show = ref(false);
let category = ref<Category>({
    id: 0n,
    name: "",
})
let wordBook = ref<WordBook>({
    id: 0n,
    name: "",
    createTime: new Date(),
    importance: 3,
    wordCount: 0,
    lastReviewTime: new Date(),
});
const showCategoryPicker = ref(false);
const categories = ref<Category[]>();
const categoryPickerValue = ref([]);

const customCategoryName = {
    text: 'name',
    value: 'id',
};
let article = ref<Article>({
    id: 0n,
    title: "",
    href: "",
})
const showArticlePicker = ref(false);
const articles = ref<Category[]>();
const articlePickerValue = ref([]);

const customArticleName = {
    text: 'title',
    value: 'id',
};


const initialCategories = () => {
    axios.get(url + "/category/categories").then(resp => {
        categories.value = resp.data;
    })
}

const onCategoryConfirm = ({ selectedValues, selectedOptions }) => {
    category.value = selectedOptions[0]
    categoryPickerValue.value = selectedValues;
    showCategoryPicker.value = false;
};

const initialArticles = () => {
    axios.get(url + "/article/articles").then(resp => {
        articles.value = resp.data;
    })
}

const onArticleConfirm = ({ selectedValues, selectedOptions }) => {
    article.value = selectedOptions[0]
    console.log(article.value);
    showArticlePicker.value = false;
};


const onSubmit = () => {
    emits('createWordbook', category.value, article.value, wordBook.value);
    article = ref<Article>({
        id: 0n,
        title: "",
        href: "",
    })

    category = ref<Category>({
        id: 0n,
        name: "",
    })
    wordBook = ref<WordBook>({
        id: 0n,
        name: "",
        createTime: new Date(),
        importance: 3,
        wordCount: 0,
        lastReviewTime: new Date(),
    });
    show.value = false;
}

</script>

<style scoped>
.wordbook-add {
    height: 120px;
    width: 80px;
    /* 可根据实际需求调整宽度 */
    border: 1px dashed #87ceeb;
    /* 浅蓝色边框 */
    background-color: #d3d3d3;
    /* 淡蓝灰色背景 */
    display: flex;
    flex-direction: column;
    /* 设置为纵向排列，让子元素各占一行 */
    justify-content: center;
    /* 水平居中内容 */
    align-items: center;
    /* 垂直居中内容 */
    border-radius: 6px;
    transition: background-color 0.3s ease;
    /* 添加过渡效果，让颜色变化更平滑 */
}

.wordbook-add:hover {
    background-color: #87ceeb;
    /* 鼠标悬停时的背景颜色，浅蓝色 */
}

.wordbook-add span {
    text-align: center;
    /* 让每个span内的文字居中对齐 */
}
</style>